Ext.onReady(function() {
	Ext.define('User', {
		extend : 'Ext.data.Model',
		// id:'user_model',
		fields : [ {
			name : 'id',
			type : 'int'
		}, {
			name : 'userName',
			type : 'string'
		}, {
			name : 'desc'
		}, {
			name : 'phone'
		}, {
			name : 'hobby'
		}, {
			name : 'birthday',
			type : 'date',
			dateformat : 'Y-m-d H:i:s'
		} ]
	});

	var userStore = Ext.create('Ext.data.Store', {
		model : 'User',
		pageSize : 10,// 每页显示的条数
		proxy : {
			type : 'ajax',
			url : 'pagingServlet',
			reader : {
				type : 'json',
				rootProperty : 'datas',
				totalProperty : 'total'
			}
		},
		autoLoad:true
	});
	/*
	 * var userQueryStore = Ext.create('Ext.data.Store', { model : 'User',
	 * pageSize : 10,// 每页显示的条数 proxy : { type : 'ajax', url :
	 * 'getByNameServlet', reader : { type : 'json', rootProperty : 'datas',
	 * totalProperty : 'total' } } });
	 */

	var columns = [ {
		text : 'ID',
		dataIndex : 'id'
	}, {
		text : '姓名',
		dataIndex : 'userName'
	}, {
		text : '描述',
		dataIndex : 'desc'
	}, {
		text : '电话',
		dataIndex : 'phone'
	}, {
		text : '爱好',
		dataIndex : 'hobby'
	}, {
		text : '生日',
		dataIndex : 'birthday'
	} ];
	var win = Ext.create('Ext.window.Window', {
		title : 'Ext分页实例',
		height : 600,
		width : 800,
		layout : 'fit',
		collapsible : true, // 可折叠
		autoScroll : true,
		draggable : true,
		tbar : [ {
			xtype : 'container',
			layout : 'form',
			items : [ {
				xtype : 'textfield',
				fieldLabel : '按姓名查找',
				labelWidth : '70',
				name : 'userN',
				id : 'userName'
			} ]
		}, '-', {
			xtype : 'button',
			text : '查询',
			iconCls : 'search',
			tooltip : 'Query By Name',
			handler : function() {
				var searchParam = Ext.getCmp('userName').getValue();
				if (searchParam.trim() == '') {
					Ext.Msg.alert("提示", "请输入用户名！");
				} else {
					alert(searchParam);
					Ext.apply(userStore.proxy.extraParams, {
						userName : searchParam,
						limit:10,
						start:0
					});
					userStore.reload();
				}

			}
		} ],
		items : {
			xtype : 'grid',
			id : 'myGrid',
			store : userStore,
			columns : columns,
			selModel : 'cellmodel',
			autoScroll : true
		},
		dockedItems : [ {
			id : 'paging',
			xtype : 'pagingtoolbar',
			store : userStore, // same store GridPanel is using
			dock : 'bottom',
			displayInfo : true
		} ],
		renderTo : Ext.getBody()
	});
	win.show();

});